<template>
    <div class="chat-home">

        <div class="chat-content" ref="box">
            <div class="msg">
                <div v-for="item in list" :class="[item.type, 'msg-item']">
                    <div class="msg_val">
                        <!-- :class="item.type = 'mine' ? 'manager' : 'iconfont icon-rengongzhinengjiqiren'" -->

                        <van-icon style=" background-color:cadetblue;display: flex;border-radius: 23px;padding: 4px;
                         color: white; height: 35px; width: 35px;" round  :class="[item.type == 'robot' ? 'iconfont icon-rengongzhinengjiqiren' : 'iconfont icon-nvshangjia']"
                            size="35px"></van-icon>

                        <div class="chat-info">
                            <p class="chat-date">22:12:11</p>
                            <p class="chat">
                                {{ item.content }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <van-cell-group>
            <van-field v-model="sms" rows="1" :autosize="{ maxHeight: 100, minHeight: 15 }" type="textarea"
                placeholder="请输入需求，例如:写一首诗">
                <template #button>
                    <van-icon style=" background-color:cadetblue;display: flex;border-radius: 23px;
    padding: 4px; color: white;" round class="iconfont icon-fasongxiaoxitubiao" size="30px"
                        @touchstart="a()"></van-icon>
                </template>
            </van-field>
        </van-cell-group>
    </div>
</template>
  
<script>
import { test } from "@/utils/test.js";

export default {
    name: 'my_login',
    data() {
        return {
            list: [],//聊天记录的数组
            contentText: "",//input输入的值
            sms: ""
        }
    },
    methods: {
        a() {
            this.list = [...this.list, { type: "mine", content: this.sms }];

            test({ chart: this.sms }).then((response) => {
                // debugger
                console.log("结果--------" + response)
                this.list = [...this.list, { type: "robot", content: response }];
            })
                .catch((err) => { });
            this.scrollToBottom();
        },
        scrollToBottom() { // 滚动到窗体底部
            this.$nextTick(() => {
                this.$refs.box.scrollTop = this.$refs.box.scrollHeight + 10;
            });
        },

    }
}
</script>
  
<style scoped lang="scss" >
.chat-content {
    overflow: auto;
    height: 100%;
}

.chat-home {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: aliceblue;

    .van-cell-group {
        position: absolute;
        bottom: 0px;
        width: 100%;

        .van-cell {

            .van-cell__value {
                background-color: rgb(255, 255, 0) !important;
                border-radius: 10px;

                .van-field__body {
                    background-color: rgb(0, 255, 119) !important;
                    ;

                    .van-field__button {}
                }

            }
        }
    }
}



.msg {
    padding-top: 5px;
    padding-bottom: 50px;
    align-items: center;

    .msg-item {
        // font-size: 14px;
        margin: 0 10px;

        // margin-left: 10px;
        .msg_val {
            padding: 10px 0;
            border-radius: 40px;
            color: black;
            margin: 0 0 2px 0;
            max-width: 90%;
            text-align: left;
            display: flex;

            p {
                font-size: 12px;
                line-height: 16px;
                margin: 0px;
                word-break: break-all;
            }

            .chat {
                font-size: 14px;
                line-height: 20px;
                padding: 8px 10px;
                background: #fff;
                border-radius: 4px;
            }

        }

        &.robot {
            .msg_val {
                .chat-info {
                    padding-left: 10px;
                }
            }

        }

        &.mine {
            display: flex;
            flex-direction: row-reverse;

            .msg_val {

                // padding-left: 10px;
                // color: black;
                // display: flex;
                flex-direction: row-reverse;

                .chat-info {
                    padding-right: 10px;

                    .chat-date {
                        text-align: end;
                    }

                }
            }
        }
    }
}</style>
  